<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>短信验证码获取</title>
    <script src="jquery.js"></script>
    <style>
        body { font-family: Arial, sans-serif; }
        .container { max-width: 400px; margin: 0 auto; padding: 20px; }
        input { margin-bottom: 10px; padding: 10px; width: 100%; }
        button { padding: 10px; background-color: #4CAF50; color: white; border: none; cursor: pointer; }
        .countdown { color: red; }
    </style>
    
    <link rel="stylesheet" type="text/css" href="/captcha/css/verify.css" media="all">
	<script src="/captcha/js/crypto-js.js"></script>
	<script src="/captcha/js/ase.js"></script>
    <script src="/captcha/js/verify.js" ></script>
</head>
<body>
    <div class="container">
        <h2>获取短信验证码</h2>
        <input type="hidden" name="captchaVerification" id="captchaVerification" />
        <input type="text" id="phone" placeholder="请输入手机号" maxlength="11">
        <button id="getCode" >获取验证码</button>
        <span id="countdown" class="countdown"></span>
        
        <div id="content"></div>
    </div>

    <script>
    $(document).ready(function() {
    	$('#content').slideVerify({
			        baseUrl:'',  //
			        containerId:'getCode',//pop模式 必填 被点击之后出现行为验证码的元素id
			        mode:'pop',     //展示模式
			        beforeCheck:function(){  //检验参数合法性的函数  mode ="pop"有效
			        	//实现: 参数合法性的判断逻辑, 返回一个boolean值
			        	 const phone = document.getElementById('phone').value;
				            if (!validatePhone(phone)) {
				                alert('请输入有效的手机号');
				                return false;
				            }
			        	
			            return true
			        },
			        ready : function() {},  //加载完毕的回调
			        success : function(params) { //成功的回调
			        	$("#captchaVerification").val(params.captchaVerification)
			        	sendCode();
			        },
			        error : function() {

                    }        //失败的回调
			    });
			});		
    
       // });
        
        
        
        let countdownTimer;

        function validatePhone(phone) {
            const phoneRegex = /^[1-9][0-9]{10}$/;
            return phoneRegex.test(phone);
        }

        function sendCode() {
            const phone = document.getElementById('phone').value;

			$.post("send_msg",{'phone':phone,'captchaVerification':$("#captchaVerification").val()},function(data){
				alert(data.msg)
			})
            let timeLeft = 60;
            document.getElementById('getCode').disabled = true;
            document.getElementById('countdown').textContent = `倒计时: ${r"${timeLeft}"}s`;
            $("#getCode").css("background-color","#bbbbbb");

            countdownTimer = setInterval(() => {
                timeLeft--;
                document.getElementById('countdown').textContent = `倒计时: ${r"${timeLeft}"}s`;
                if (timeLeft <= 0) {
                    clearInterval(countdownTimer);
                    document.getElementById('countdown').textContent = '';
                    document.getElementById('getCode').disabled = false;
                    $("#getCode").css("background-color","#4CAF50");
                }
            }, 1000);
        }
    </script>
</body>
</html>
